<template>
  <div id="setPassword">
    <!--后退-->
    <img class="back" src="../../../assets/homepage/chanel.png" alt="" onclick="history.go(-1)">
    <div class="header">
        <section class="one">
            <img src="../../../assets/homepage/unphone.png" alt="">
            <p>手机验证</p>
        </section>
        <img src="../../../assets/homepage/arrow.png" alt="">
        <section class="two">
            <img src="../../../assets/homepage/unpeople.png" alt="">
            <p>实名认证</p>
        </section>
         <img src="../../../assets/homepage/arrow.png" alt="">
        <section class="three">
            <img src="../../../assets/homepage/psw.png" alt="">
            <p>交易密码设置</p>
        </section>
    </div>
    <div class="certified">
        <p>请再次输入四位交易密码</p> 
        <section>
            <input ref="input1" v-model="iput1" maxlength="1" v-focus type="text">
            <input ref="input2" v-model="iput2" maxlength="1" type="text">
            <input ref="input3" v-model="iput3" maxlength="1" type="text">
            <input ref="input4" v-model="iput4" maxlength="1" type="text">
        </section> 
      </div>
      <p @click="next" class="next">下一步</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
        userConfirm:{
            payPassword:undefined,
        },
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        active:0,
    }
  },
   watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  created(){
      this.userConfirm = this.$route.params.data;
  },
  methods:{
    next(){
         this.userConfirm.payPassword = this.iput1+this.iput2+this.iput3+this.iput4
         this.$router.push({
            path: '/resetAgain',
            name: 'resetAgain', 
            params: {
                name: 'resetAgain',
                data: this.userConfirm,
            }
            
        })
        // this.$router.push('/resetAgain')
    }
  }
}
</script>
<style>
#setPassword{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/homepage/Verified.png);
}
#setPassword .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
}
#setPassword .header{
    height:15%;
    width:75%;
    padding:1.5rem 0px;
    margin:0px auto;
    display:flex;
    justify-content:space-between;
}
#setPassword .header > img{
     height:0.05rem;
     width:2.5rem;
     margin-top:0.75rem;
}
#setPassword .header .one{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#8a8a8a;
}
#setPassword .header .two{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#8a8a8a;
}
#setPassword .header .three{
    text-align:center;
    font-size:0.6rem;
    line-height:1.5rem;
    color:#29a193;
}
#setPassword .header > section >img {
    height:1.5rem;
    width:1.5rem;
}
#setPassword .certified{
    width:80%;
    margin:1.5rem auto;
    height:16rem;
    background:#fff;
    box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;
    border-radius:13px;
}
#setPassword .certified > p{
    width:60%;
    height:2.25rem;
    margin:auto;
    line-height:3.5rem;
    font-size:0.8rem;
    color:#888888;
    text-align:center;
    border-bottom:1px solid #e2e2e2;
}
#setPassword .certified > section{
    width:80%;
    margin:3rem auto;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
}
#setPassword .certified > section >input{
    height:3rem;
    width:3rem;
    text-align:center;
    height:3rem;
    border:1px solid #8a8a8a;
}
#setPassword  .next{
    width:30%;
    margin:2.5rem auto;
    background:#29a193;
    text-align:center;
    margin-top:2.5rem;
    color:#fff;
    height:2rem;
    line-height:2rem;
    border-radius:8px;
}
</style>